<template>
    <div>
    <div  class="center">
       <div class="userfirst">
           <h2 class="usertitle">用户评论</h2>
           <p class="userjie">用户评论相当于内容播发后，用户对内容进行的二次生产，这种生产由于其多样性、真实性、针对性而具有阅读和研究价值。对用户评论的高效利用有利于实现用户的连接、强化和群体聚合，提升用户认同感。本产品基于海纳独有的大颗粒分词技术，快速聚合主流传播平台热门评论，深度挖掘、分析评论内容，并进行可视化呈现。</p>
           <div class="userpic">
              <div v-for="(user,index) in usertask" class="userauto" @mouseover="change(index)" @mouseenter="stop" @mouseleave="go" :class="{'active':index===currentIndex}">
                  <img :src="user.imageurl" class="imgwid">
                  <div class="userline">
                     <span class="usercicle" :class="{'act':index===currentIndex}" ></span>
                  </div>
                  <div class="usercont">
                      <p class="username">{{user.title}}</p>
                      <p class="usertent">{{user.content}}</p>
                  </div>
              </div>
           </div>
       </div>
       <div class="usersecond">
           <h2 class="usertitle">Demo 展示</h2>

           <div class="userpi">
               <button type="button" class="btn userbtn"><a href="#">热评事件</a></button>
               <div class="useract">
                   <p class="secondact">六六手撕京东售假，你支持谁？</p>
                   <div class="row usecont">
                     <div class="col-sm-3 secpic">
                         <img src="../../../static/image/userjing.jpg" class="img-responsive"/>
                     </div>
                     <div class="col-sm-9">
                         <p class="usercon">六六手撕京东售假，称京东不能以“京东自营不是京东商城自营”、“买家想讹钱”这种方式证明自己没卖假货。出了问题该解决问题，不是解决提出问题的人。
                         六六手撕京东售假，称京东不能以“京东自营不是京东商城自营”、“买家想讹钱”这种方式证明自己没卖假货。出了问题该解决问题，不是解决提出问题的人。
                         六六手撕京东售假，称京东不能以“京东自营不是京东商城自营”、“买家想讹钱”这种方式证明自己没卖假货。出了问题该解决问题，不是解决提出问题的人。
                         六六手撕京东售假，称京东不能以“京东自营不是京东商城自营”、“买家想讹钱”这种方式证明自己没卖假货。出了问题该解决问题，不是解决提出问题的人。
                         </p>
                         <span class="userfind"><a href="#">查看详情>></a></span>
                     </div>
                   </div>
               </div>
           </div>

           <div class="userpi">
               <button type="button" class="btn userbtn"><a href="#">热门观点</a></button>
               <div class="useract">
                    <table class="table">
                        <thead>
                          <tr class="tabtit">
                            <th>热门观点</th>
                            <th>用户昵称</th>
                            <th>来源</th>
                            <th>点赞数</th>
                          </tr>
                        </thead>
                        <tbody class="tabcon">
                          <tr>
                          <td class="tabone"><a href="#">小舅子可爱小姨子可怕,真不能娶，除非女方家有钱，身边的有人有老婆</a></td>
                            <td class="tabtwo">在下乔峰</td>
                            <td class="tabthree">网易网</td>
                            <td class="tabfour">417</td>
                          </tr>
                        </tbody>
                    </table>
               </div>
           </div>

           <div class="userpi">
               <button type="button" class="btn userbtn"><a href="#">热门词汇</a></button>
               <Hotword></Hotword>
           </div>

           <div class="userpi userwang">
               <div class="col-md-7">
                   <button type="button" class="btn userbtn"><a href="#">网友态度</a></button>
                   <Attitude></Attitude>
               </div>
               <div class="col-md-5">
                   <button type="button" class="btn userbtn"><a href="#">网友情感</a></button>
                   <Emotion></Emotion>
               </div>
           </div>

           <div class="userpi">
               <button type="button" class="btn userbtn"><a href="#">地域分布</a></button>
               <div class="col-md-7">
                   <Local></Local>
               </div>
               <div class="col-md-5">
                   <Pai></Pai>
               </div>
           </div>

           <div class="userpi">
               <button type="button" class="btn userbtn"><a href="#">参与度趋势</a></button>
               <Partake></Partake>
           </div>
       </div>
       </div>
       <Bottom></Bottom>
    </div>

</template>
<script>
 import Hotword from '@/components/userreviews/hotword'
 import Attitude from '@/components/userreviews/attitude'
 import Emotion from '@/components/userreviews/emotion'
 import Local from '@/components/userreviews/local'
 import Pai from '@/components/userreviews/pai'
 import Partake from '@/components/userreviews/Partake'
 import Bottom from '@/components/common/bootom'
 import {mapGetters,mapActions} from 'vuex'
export default {
  components:{
     'Hotword':Hotword,
     'Attitude':Attitude,
     'Emotion':Emotion,
     'Local':Local,
     'Pai':Pai,
     'Partake':Partake,
     'Bottom':Bottom
  },
  data(){
    return{
        timer:''
    }
  },
  created:function(){
    this.$nextTick(() =>{
          this.timer = setInterval(() => {
              this.autoPlay();
              if(this.currentIndex==0){

               }
         },4000)
    })
  },
  computed:mapGetters([
     'count','currentIndex','usertask'
  ]),
  methods:{
      ...mapActions([
          'autoPlay'
      ]),
     change(index) {
         this.$store.state.currentIndex = index
     },
     go() {
         this.timer = setInterval(() => {
          this.autoPlay()
         },8000)
     },
     stop() {
         clearInterval(this.timer)
         this.timer = null
     }
  }
}
</script>
<style>
.imgwid{width:32px;height:32px;margin:30px}
.user,.userfirst{width:100%}
.usertitle{font-family:'微软雅黑';text-align:center;margin:20px 0;}
.userjie{width:80%;text-align:center;margin:0 auto}
.userpic{width:100%;height:350px;padding:20px 50px;overflow:hidden;border-bottom:1px solid #e2e2e2;}
.userwang{height:400px}
.userpi{width:100%;padding:20px 50px;overflow:hidden;}

.userbtn{background:#8BABD1;border-radius:17px;padding:6px 18px;display:block}
.userbtn a{color:white;text-decoration: none}
.usecont{margin-top:20px;}
.useract{width:100%;margin-top:40px}
.secondact{color:#414B6A;font-size:24px;font-weight:600}
.secpic{padding:10px;border-right:1px solid #e2e2e2}
.userfind a{color:#6FC9EE}
.usercon{font-size:18px;color:#8C8C8C;height:120px;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-inline-box;}

.tabtit,.tabcon{font-size:16px;}
.tabcon{color:#7B7B7B}
.tabcon a{color:#7B7B7B}
.tabone{width:50%;}
.tabtwo{width:20%}
.tabthree{width:20%}
.tabfour{width:10%}
.tabone,.tabtwo,.tabthree,.tabfour{overflow:hidden; white-space: nowrap;text-overflow:ellipsis;cursor:pointer}

.friend{width:40%;float:left;margin-right:20px}

.userauto{width:25%;float:left;text-align:center;color:#7B7B7B}
.userline{border:1px solid #CCCCCC;position:relative;}
.usercicle{width:28px;height:28px;border-radius:28px;background:#CCCCCC;display:inline-block;position:absolute;top:-14px;margin-left:-14px}
.userauto:hover{cursor:pointer}
.userauto:hover .usercicle{background:#00CCFF;color:#8BABD1;}
.usercont{margin-top:50px}
.username{font-size:18px;}
.usertent{font-size:14px;padding:0 15px;text-align:left}

.act{background:#00CCFF;}
.active{color:#8BABD1;}
</style>